<template>
  <view>
    <van-search
      shape="square"
      background="#ff2d4a"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播图部分 -->
    <view class="index_swiper">
      <swiper indicator-dots autoplay circular class="index_swiper">
        <swiper-item v-for="(item, index) in swiperList" :key="index">
          <image mode="widthFix" :src="item.image_src" />
        </swiper-item>
      </swiper>
    </view>
    <!-- 导航栏部分 -->
    <view class="index_nav">
      <view
        class="index_nav_item"
        v-for="(item, index) in catitemsList"
        :key="index"
      >
        <image mode="widthFix" :src="item.image_src" />
      </view>
    </view>
    <!-- 楼层数据 -->
    <view class="index_floor">
      <view
        class="index_floor_item"
        v-for="(item, index) in floorList"
        :key="index"
      >
        <image mode="widthFix" :src="item.floor_title.image_src" />
        <view class="index_nav_item_image">
          <view v-for="(item2, index2) in item.product_list" :key="index2">
            <image
              :mode="index2 === 0 ? 'widthFix' : 'scaleToFill'"
              :src="item2.image_src"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      swiperList: [],
      // 导航栏数据
      catitemsList: [],
      // 楼层数据
      floorList: [],
    };
  },
  async onLoad() {
    // 如果直接页面加载使用async  await请求的话就是会出现请求时间叠加的问题，解决的话需要在方法methods里面声明了之后在方法里面调用这个异步请求   然后在页面加载的时候调用这个方法就会同时执行了
    //  this.swiperList=await this.get({url:'/home/swiperdata'})
    //  this.catitemsList=await this.get({url:'/home/catitems'})
    //  this.floorList=await this.get({url:'/home/floordata'})
    this.getSwiperList();
    this.getCatitemsList();
    this.getFloorList();
  },
  methods: {
    // 轮播图数据
    async getSwiperList() {
      this.swiperList = await this.get({ url: "/home/swiperdata" });
    },
    // 导航栏数据
    async getCatitemsList() {
      this.catitemsList = await this.get({ url: "/home/catitems" });
    },
    // 楼层数据
    async getFloorList() {
      this.floorList = await this.get({ url: "/home/floordata" });
    },
  },
};
</script>

<style lang="less">
.index_swiper {
  swiper {
    height: 340rpx;
  }
}
.index_nav {
  display: flex;
  .index_nav_item {
    flex: 1;
  }
}
.index_floor {
  .index_floor_item {
    padding: 10rpx;

    .index_nav_item_image {
      overflow: hidden;

      view {
        float: left;
        width: 33.33%;
        border: 3rpx solid #fff;
      }
      view:nth-last-child(-n + 4) {
        height: 203rpx;
        image {
          height: 100%;
        }
      }
    }
  }
}
</style>
